<template>
   <div v-show="isShow" class="base-info-import">
      <div class="content">
         <div class="title">
            导入信息确认
            <div class="des">（以下信息尚未保存，请仔细确认后，点击下方 "确认导入" 按钮，以完成保存）</div>
         </div>

          <div v-show="groupName.length > 0" class="groupTitle">
            <div class="name">* {{groupName}}</div>
            <!-- <div class="des">以下信息将在您确认后，进行增量保存；不会覆盖或删除您原有的信息，请您放心使用。</div> -->
         </div>

         <div class="data">

            <div class="section" v-for="(paramList,index) in localSectionList" :key='index'>
               <base-info-view :isVerify="true" :isShowSecondaryTable="false" :paramList="currentEditSectionIndex===index?[]:paramList" :groupId="groupId"></base-info-view>
               <basic-info-edit :paramList="currentEditSectionIndex===index?JSON.parse(JSON.stringify(paramList)):[]"
                  :groupId="groupId"
                  :isExecuteSave="false"
                  @cancelEdit='currentEditSectionIndex=-1' 
                  @editFinish="editFinish"
                  >
               </basic-info-edit>

               <!-- 侧边操作按钮 -->
               <div class="operationButton"> 
                  <el-button v-show="currentEditSectionIndex===-1" type="primary" icon="el-icon-edit" size="mini" circle plain @click="currentEditSectionIndex=index"></el-button>
                  <el-button v-show="(currentEditSectionIndex === index || currentEditSectionIndex === -1)?true:false" type="danger" icon="el-icon-delete" size="mini" circle plain @click="deleteSection(index)"></el-button>
               </div>

               <!-- 底线 -->
               <div class="bottomLine"></div>

            </div>
         </div>

         <div class="footer">
            <el-button ref='commitButton' @click="isShow=false" size="mini">取消导入</el-button>
            <el-button ref='commitButton' @click="saveAll()" type="primary" size="mini" :loading="saveButtonIsLoading">确认导入</el-button>
         </div>
      </div>
   </div>
</template>

<script>


import { save } from '../service/personalInfoDataProcessing'


export default {
   props:{
      data:{
         type:Array,    // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
      },
      groupId:{
         type:String,
         required:true,
      },
      groupName:{
         type:String,
         required:true,
      },
   },
   data(){
      return {
         isShow:false,
         
         
         localSectionList:[],
         currentEditSectionIndex:-1,

         saveButtonIsLoading:false,
      }
   },
   methods:{
      editFinish(paramList){
         this.data[this.currentEditSectionIndex] = paramList;
         this.currentEditSectionIndex = -1;
      },
      saveAll(){

         if(this.currentEditSectionIndex !== -1){
            this.$message({message: '您有信息正处于编辑状态，请先完成正在编辑的信息 ！',type: 'error'});
            return;
         }

         this.saveButtonIsLoading = true;

         var that = this;
         save(this.data,this.groupId,this,(isSuccess)=>{
            that.saveButtonIsLoading = false;
            if(isSuccess){
               that.isShow = false;

               // 通知信息录入页面刷新数据
               window.postMessage({
                  source:"review-basic-infomation-entry-fefresh-data", // 消息来源
               }, "*");

            }
         });
      },
      deleteSection(index){
         this.currentEditSectionIndex = -1;
         this.localSectionList.splice(index,1);
         this.$message({message: '已删除',type: 'success'});
      }

   },
   watch:{
      data(){
         if(this.data.length > 0){
            this.isShow = true;
         }else{
            this.isShow = false;
         }
         this.localSectionList = this.data;
      }
   }
}
</script>

<style scoped>

   .base-info-import{
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 2;
      height: 100%;
      width: 100%;
      /* background: rgba(0, 0, 0, 0.27058823529411763); */
      background: rgba(0, 0, 0, 0.56);

      flex-direction:column;
      align-items: center;
      overflow-y: auto;
   }
   .base-info-import>.content{
      background: white;
      width: calc(100% - 516px + 173px);  /* 173右侧导航栏的宽度 */
      width: 84%;
      font-size: 14px;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      
      padding:20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
      margin-bottom: 50px;

      box-shadow: 3px 1px 12px 1px #00000069;
      border-radius: 5px;
      padding-bottom:30px;
   }

   .content{
      display: flex;
      flex-direction: column;

   }
   .content>.title{
      display: flex;
      padding:14px 20px;
      padding-bottom: 0px;
      font-size:18px;
      align-items: baseline;
   }
   .content>.title>.des{
      font-size: 15px;
      color: rgb(255, 0, 0);
   }


   .groupTitle{
      display: flex;
      padding: 24px 0px;
      padding-right: 17px;
      padding-left: 22px;
   }
   .groupTitle>.name{
      color: #31478F;
      font-weight: bold;
      margin-right: auto;
   }
   .groupTitle>.des{
      font-size: 15px;
      color:gray;
   }
   .groupTitle>.operation{
      margin-right: -35px;
   }

   .content>.footer{
      display: flex;
      align-items: center;
      justify-content:center;
      padding:10px;
      padding-top: 30px;
   }
   .content>.footer>button{
      padding:7px 40px;
   }


   /* 数据条 */
   .section{
      position: relative;
      padding: 0px 28px;
      padding-top: 28px;
      padding-bottom: 16px;
   }
   .section:not(:last-child){
      margin-bottom: 10px;
   }
   .section>.bottomLine{
      height: 1px;
      position: absolute;
      bottom: 0px;
      background-color: rgb(239, 239, 239);
      left: 40px;
      right: 40px;
   }

   /* 侧边操作按钮(编辑、删除) */
   .operationButton{
      position:absolute;
      display: flex;
      flex-direction:column;
      align-items: center;
      justify-content: center;
      right:-8px;
      top: 32px;
   }
   .operationButton>button:first-child{
      margin-bottom: 14px;
   }
   .operationButton>button:last-child{
      margin: 0px;
   }




</style>